<template>
    <view class="affair_detail">
        <view class="nav" :style="{ background: showBg ? '#333' : '' }">
            <global-nav-bar type="black" left-icon="back" :color="showBg ? '#fff' : '#333'" :title="navBarTitle"
                :fixed="false" :isLeftBackShow="isLeftBackShow" backgroundColor="rgba(0, 0, 0, 0)"></global-nav-bar>
        </view>
        <!-- 头部进度条 -->
        <view class="header" v-if="!isApproval">
            <elevtor-card :msg="{
                ...elevatorDetail,
                elevatorId: this.elevatorId,
            }">
            </elevtor-card>
            <view class="appealTag">
                <view class="tag" v-if="appealDetail.appealStatus != 2"
                    :style="{ borderColor: appealDetail.appealType == 1 ? '#FA6400' : '#E02020', color: appealDetail.appealType == 1 ? '#FA6400' : '#E02020' }">
                    {{ appealDetail.appealType == 1 ? '待申诉' : '不可申诉' }}
                </view>
                <view class="tag" v-else>已申诉</view>
                <view class="tag" style="margin-top: 12rpx;" v-if="appealDetail.appealResult" :style="{
                    borderColor: appealDetail.appealResult == 1 ? '#FA6400' : appealDetail.appealResult == 2 ? '#16BF99' : '#E02020',
                    color: appealDetail.appealResult == 1 ? '#FA6400' : appealDetail.appealResult == 2 ? '#16BF99' : '#E02020'
                }">
                    {{ appealDetail.appealResult == 1 ? '待审核' :
                        appealDetail.appealResult
                            == 2 ? '审核通过' : '审核不通过' }}
                </view>
            </view>
        </view>
        <view class="eleInfo" v-else>
            <view class="top">
                <view class="top_left">
                    {{ elevatorDetail.buildingName + '-' + elevatorDetail.elevatorAddress }}
                </view>
                <view>{{ elevatorDetail.buildingAddress }}</view>
            </view>
            <image :src="approveList[appealDetail.appealResult - 1].url"> </image>
        </view>
        <view class="addressBox" v-if="!isApproval">
            <view class="addressBox_left">
                <view class="top">
                    <view class="name">
                        <image src="@/static/images/index/buildIcon.svg" mode=""></image>
                        <view>{{ elevatorDetail.buildingName }}</view>
                    </view>
                </view>
                <view class="buildAddress" @click.stop="petName(elevatorDetail)" v-if="
                    elevatorDetail.relationAlias && elevatorDetail.relationAlias.length
                ">
                    <view class="buildings">项目别名:{{
                        elevatorDetail.relationAlias.map((item) => item.alias).join(",")
                    }}</view>
                    <view>
                        <uni-icons :type="popupShow ? 'arrowup' : 'arrowdown'" size="14" color="#999;"></uni-icons>
                    </view>
                </view>
                <view class="buildAddress" @click.stop="toProjectDetail">{{
                    elevatorDetail.buildingAddress
                }}</view>
            </view>
            <view class="addressBox_right">
                <view class="gpsAndCall">
                    <view class="gpsAndCall_item" @click.stop="handleCall(0)" v-if="
                        elevatorDetail.estateUserList &&
                        elevatorDetail.estateUserList.length
                    ">
                        <image src="@/static/images/phone3.png" mode=""></image>
                        <view>物业</view>
                    </view>
                    <view class="gpsAndCall_item guide" @click.stop="handleGuide">
                        <image src="@/static/images/locations.png" mode=""></image>
                        <view>导航</view>
                    </view>
                    <view class="line" v-if="
                        elevatorDetail.estateUserList &&
                        elevatorDetail.estateUserList.length
                    "></view>
                </view>
            </view>
        </view>
        <view class="content_box" :style="{ zIndex: showBg ? '100' : '105' }">
            <view class="progressBar">
                <view class="progressBar_content">
                    <view>保养人员</view>
                    <view class="userListBox" @click="goTaskSetpPage">
                        <user-list lable="保养人员" :list="planDetail.users" :taskStep="true"></user-list>
                    </view>
                </view>
            </view>

            <view class="content_item">
                <view class="title" style="padding: 0;">整改事项</view>
                <view class="temp-list" v-for="(item, index) in workOrderDetailList" :key="index">
                    <view class="top">
                        <view class="indexNumber">
                            {{ index + 1 }}
                        </view>
                        <view style="font-weight: 500;">{{ item.tltNames || item.locationTypeName }}</view>
                        <view @click="updateShow(item)" style="margin-left: auto;color: #0091FF;">{{ item.historyShow ?
                            '收起' : '展开' }}历史记录</view>
                    </view>

                    <view class="content" v-if="item.historyShow">
                        <view v-if="item.signImg">
                            <view>{{ item.requireDesc || '打卡记录' }}</view>
                            <view style="display: flex;align-items: center;display: flex;flex-wrap: wrap;">
                                <view v-for="(it, idx) in item.signImg.split(',')" :key="idx"
                                    style="margin-top: 16rpx;margin-right: 16rpx;">
                                    <image @click="preViewFileJust(item.signImg.split(','), idx)" :src="it"
                                        :mode="'scaleToFill'" style="width: 112rpx;height: 112rpx;" />
                                </view>
                            </view>
                        </view>
                        <view v-else>
                            <conItemwork :disabled="true" :pictureDisable="1" :planStatus="status"
                                :isPlanStatus="isPlanStatus" :form="item" :planId="planId" :idx="idx"></conItemwork>
                        </view>
                    </view>

                    <view class="content">
                        <view class="c_title">工作项问题</view>
                        <view style="margin-top: 16rpx;">{{ item.questionDesc }}</view>
                    </view>

                    <view class="add-appeal-reason" @click="addReason(item)"
                        v-if="!item.appealDesc && appealDetail.appealType == 1 && !appealDetail.appealResult">
                        <image src="@/static/images/addService.png"></image>
                        <view :style="{ color: item.verification ? '#E02020' : '#0091FF' }">添加申诉原因</view>
                    </view>
                    <view class="content" v-else-if="appealDetail.appealType == 1">
                        <view class="appeal-reason-header">
                            <view class="c_title">申诉原因</view>
                            <view class="appeal-reason-imgBox"
                                v-if="!appealDetail.appealResult && userinfo.user_id == item.appealUserId">
                                <view @click="updateReason(item)">
                                    <image src="@/static/images/edit2.png" mode="">
                                    </image>
                                </view>
                                <view class="line"></view>
                                <view @click="delReason(item)">
                                    <image src="@/static/images/del.png" mode="">
                                    </image>
                                </view>
                            </view>
                        </view>
                        <view style="margin-top: 16rpx;">{{ item.appealDesc }}</view>
                        <view style="display: flex;align-items: center;">
                            <view v-for="(it, idx) in item.appealImg" :key="idx"
                                style="margin-top: 16rpx;margin-right: 16rpx;">
                                <image @click="preViewFile(item.appealImg, idx)" :lazy-load="true" :src="it.type == 'image'
                                    ? it.url
                                    : it.img || '/static/images/video.png'
                                    " mode="aspectFill" style="width: 112rpx;height: 112rpx;"></image>
                            </view>
                        </view>
                        <view style="color: #999999;">{{ item.appealUserName + ' ' + item.appealTime }}</view>
                    </view>
                </view>
            </view>

            <view class="content_item" v-if="!isApproval && appealDetail.appealType == 1">
                <view style="display: flex;align-items: center;justify-content: space-between;">
                    <view class="title" style="padding: 0;">审核人</view>
                    <view>{{ approverUserName }}</view>
                </view>
            </view>

            <view class="content_item" v-if="appealDetail.approverDesc && appealDetail.appealResult == 2">
                <view class="title" style="padding: 0;">备注</view>
                <view style="margin-top: 32rpx;">{{ appealDetail.approverDesc }}</view>
            </view>

            <view class="content_item" v-if="appealDetail.appealResult == 3">
                <view class="title" style="padding: 0;">不通过原因</view>
                <view style="margin-top: 32rpx;">{{ appealDetail.approverDesc }}</view>
            </view>
        </view>
        <view class="bottom" v-if="isApproval && appealDetail.appealResult == 1">
            <view class="right flex">
                <view class="start flex" style="border-radius: 0;background: #FDEDED;color: #E02020;"
                    @click="handleApprove(1)">审核不通过</view>
                <view class="start flex" style="border-radius: 0;" @click="handleApprove(2)">审核通过</view>
            </view>
        </view>
        <view class="bottom"
            v-if="appealDetail.appealType == 1 && !isApproval && (appealDetail.appealResult == 1 || (appealDetail.appealResult != 2 && appealDetail.appealResult != 3))">
            <view class="right flex" v-if="appealDetail.appealResult == 1">
                <view class="start flex" @click="handleRevoke">撤销申诉</view>
            </view>
            <view class="right flex" v-else-if="appealDetail.appealResult != 2 && appealDetail.appealResult != 3">
                <view class="start flex" @click="handleSubmit">提交申诉审批</view>
            </view>
        </view>
        <!-- 底部部分 -->
        <aliasPopup :showAlias="popupShow" :aliasArr="aliasArr" @closedMask="closedMask"></aliasPopup>
        <previewMedia ref="previewMedia"></previewMedia>
        <!-- 物业电话 -->
        <property-phone ref="property" @bindClose="closePhone" :list="elevatorDetail.estateUserList"></property-phone>

        <!-- 添加/编辑申诉原因 -->
        <appealDialog ref="appealDialog" @submit="submitAppeal" :show="showPopups" @closed="showPopups = false" :popupsTitle="popupsTitle">
        </appealDialog>

        <!-- 审核 -->
        <uni-popup ref="inputDialog" type="center" @change="remark = ''">
            <view class="inputPopup">
                <view class="inputPopup-top">
                    <view class="title">提示</view>
                    <view style="color: #333333;font-size: 28rpx;margin-top: 36rpx;margin-bottom: 8rpx;">{{ approvalType
                        == 1 ? '是否审核不通过？' : '是否审核通过？' }}</view>
                    <view class="notice" :style="{ borderColor: showToast ? '#E02020' : '#e9e9e9' }">
                        <textarea type="textarea" v-model="remark" height="108rpx"
                            :placeholder="approvalType == 1 ? '请填写不通过原因(必填)' : '请填写备注(选填)'" @input="inputRemark"
                            placeholder-class="textare" style="font-size: 28rpx;height:108rpx;" maxlength="100" />
                        <view class="length">{{ remark.length + '/100' }}</view>
                    </view>
                    <view v-if="showToast" style="color: #E02020;font-size: 24rpx;text-align: left;">请填写不通过原因</view>
                </view>
                <view class="inputPopup-bottom">
                    <view @click="$refs.inputDialog.close()">取消</view>
                    <view style="color: #0091FF;border-right: 0;" @click="submitApproval">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import ElevtorCard from './components/elevtor-card.vue';
import UserList from '@/components/user-list/user-list.vue';
import model from '@/components/model/index.vue';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import PropertyPhone from '@/components/propertyPhone/index.vue';
import appealDialog from './components/appealDialog.vue';
import { getPlanDetail } from '@/apis/workOrder.js';
import { mapState, mapActions } from 'vuex';
import {
	elevtorDetail,
} from '@/apis/elevator.js';
import { getAppealDetail, getAppealDetailList, submitAppeal, submitAppealReason, repealAppeal, submitAppealResult } from '@/apis/appeal.js';
import aliasPopup from '@/components/card-dial/aliasPopup.vue';
import conItemwork from './components/templateTree/conItemwork.vue';
import { getConfig } from '@/apis/sign.js';
export default {
	components: {
		GlobalNavBar,
		model,
		ElevtorCard,
		UserList,
		PropertyPhone,
		appealDialog,
		conItemwork,
		aliasPopup,
	},
	data() {
		return {
			id: '',
			// 顶部导航栏title
			navBarTitle: '',
			elevatorId: '',
			// 任务状态详情
			planDetail: {},
			status: '',
			elevatorDetail: {},
			planId: '',
			showBg: false,
			imgaddress: '',
			movable: {
				x: 320,
				y: 0,
				height: 0,
				width: 0,
			},
			isLeftBackShow: true,
			popupShow: false,
			aliasArr: [],
			workOrderDetailList: [],
			map: {},
			scrollTop: 0,
			showPopups: false,
			appealId: '',
			appealDetail: {},
			isApproval: false,
			approveList: [
				{
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/a9c44724b6f996dba5f19a97d10510b7.png',
				},
				{
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/d7a8dd9bb0438165303085145258bac8.png',
				},
				{
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/7395cb4bbc64ec640e503cc995e13872.png',
				},
			],
			remark: '',
			showToast: false,
			approvalType: 1,
			approverUserName:'',
			popupsTitle:'',
		};
	},

	async onLoad(e) {
		this.navBarTitle = '保养整改问题详情';
		this.id = e.id;
		this.planId = e.planId;
		this.elevatorId = e.elevatorId;
		if (e.isApproval) {
			this.isApproval = e.isApproval;
		}
		await this.initData();
		await this.handleRreshToken();
		uni.$on('openCamera', (data) => {
			this.openCamera(data);
		});
	},
	onUnload() {
	},
	async onShow() {
		await this.handleRreshToken();
		if (!this.userinfo.user_id) {
			uni.showModal({
				title: '提示',
				content: '检测到您未登录或登录已失效，请前往登录后在操作',
				showCancel: false,
				success: () => {
					uni.navigateTo({
						url: '../login/index',
					});
				},
			});
			return;
		}
	},
	mounted() {
		wx.getSystemInfo({
			success: (res) => {
				console.log('system', res);
				this.movable.height = res.windowHeight - 100;
				this.movable.y = res.windowHeight - 240;
				this.movable.width = res.windowWidth;
				this.movable.x = this.movable.width - 55;
			},
		});
	},
	watch: {

	},
	computed: {
		...mapState('user', ['userinfo']),
		showBtns() {
			let next = false;
			if (!this.planDetail.users) {
				return next;
			}
			for (let i = 0; i < this.planDetail.users.length; i++) {
				if (this.planDetail.users[i].userId == this.userinfo.user_id) {
					next = true;
					break;
				}
			}
			return next;
		},
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop > 20) {
			this.navBarTitle = this.elevatorDetail.elevatorAddress;
			this.showBg = true;
			this.scrollTop = e.scrollTop;
		} else {
			this.navBarTitle = '保养整改问题详情';
			this.showBg = false;
		}
	},
	methods: {
		...mapActions('user', ['handleRreshToken']),
		// 删除申诉原因
		delReason(item) {
			submitAppealReason({
				appealImg: null,
				appealDesc: null,
				id: item.byScoreQuestionId
			}).then(res => {
				uni.showToast({
					title: '删除成功',
					icon: 'none',
				});
				this.getDetail();
			});
		},
		// 编辑申诉原因
		updateReason(item) {
			this.showPopups = true;
			this.popupsTitle = '编辑申诉原因';
			this.$refs.appealDialog.remark = item.appealDesc;
			this.$refs.appealDialog.imgUrl = item.appealImg;
			this.$refs.appealDialog.appealId = item.byScoreQuestionId;
		},
		// 新增申诉原因
		addReason(item) {
			this.showPopups = true;
			this.popupsTitle = '添加申诉原因';
			this.$refs.appealDialog.appealId = item.byScoreQuestionId;
		},
		// 提交申诉原因
		submitAppeal() {
			this.showPopups = false;
			uni.showToast({
				title: '操作成功',
				icon: 'none',
			});
			this.getDetail();
		},
		// 工单审核
		handleApprove(type) {
			this.approvalType = type;
			this.$refs.inputDialog.open();
		},
		inputRemark() {
			if (this.remark) {
				this.showToast = false;
			}
		},
		// 确定审核结果
		submitApproval() {
			if (this.approvalType == 1 && !this.remark) {
				this.showToast = true;
				return;
			}
			submitAppealResult({
				id: this.id,
				appealResult: this.approvalType == 1 ? 3 : 2,
				approverDesc: this.remark
			}).then(res => {
				this.$refs.inputDialog.close();
				uni.showToast({
					title: '操作成功',
					icon: 'none',
				});
				this.getDetail();
				getAppealDetail({ id: this.id }).then((res) => {
					if (res) {
						this.appealDetail = res.data;
					}
				});
			});
		},
		// 工单撤销审核
		handleRevoke() {
			if (this.appealDetail.appealUserId != this.userinfo.user_id) {
				uni.showToast({
					title: '只有申诉人可以撤销申诉',
					icon: 'none',
				});
				return;
			}
			uni.showModal({
				title: '撤销申诉',
				content: '是否撤销保养整改问题申诉？',
				success: async (res) => {
					if (res.confirm) {
						repealAppeal({ id: this.id }).then(res => {
							uni.showToast({
								title: '撤销成功',
								icon: 'none',
							});
							this.getDetail();
							getAppealDetail({ id: this.id }).then((res) => {
								if (res) {
									this.appealDetail = res.data;
								}
							});
						});
					}
				},
			});
		},
		// 工单提交审批
		handleSubmit() {
			for (let index = 0; index < this.workOrderDetailList.length; index++) {
				const item = this.workOrderDetailList[index];
				item.verification = false; // verification 用于校验是否填写申诉原因
				if (!item.appealDesc) {
					uni.showToast({
						title: '请添加申诉原因',
						icon: 'none',
					});
					item.verification = true;
					this.$set(this.workOrderDetailList, index, { ...item });
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.selectAll('.temp-list').boundingClientRect((rects) => {
							if (rects && rects[index]) {
								uni.pageScrollTo({
									scrollTop: rects[index].top + this.scrollTop - 100, // 100为顶部偏移量，可根据实际调整
									duration: 300
								});
							}
						}).exec();
					});
					return;
				}
			}
			uni.showModal({
				title: '提交申诉',
				content: '是否提交保养整改问题申诉？',
				success: (res) => {
					if (res.confirm) {
						submitAppeal({ id: this.id }).then(res => {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
							});
							this.getDetail();
							getAppealDetail({ id: this.id }).then((res) => {
								if (res) {
									this.appealDetail = res.data;
								}
							});
						});
					}
				},
			});
		},
		// 水印相机打开钩子
		openCamera(data) {
			let params = [];
			if (data) {
				for (const key in data) {
					if (data[key]) {
						params.push(`${key}=${data[key]}`);
					}
				}
			}
			uni.navigateTo({
				url: '/pages/camera/camera' + (params.length ? `?${params.join('&')}` : ''),
				fail: (err) => {
					console.log(err);
				},
			});
		},
		updateShow(item) {
			item.historyShow = !item.historyShow;
		},
		// 项目别名弹窗
		petName(obj) {
			this.popupShow = true;
			this.aliasArr = (obj.relationAlias || []).map((item) => item.alias);
		},
		closedMask() {
			this.popupShow = false;
		},
		// 预览
		preViewFile(list, index) {
			this.$previewMedia({
				sources: list,
				current: index,
			});
		},
		// 预览
		preViewFileJust(list, index) {
			console.log('预览照片', list, index);
			let url = list.map((item) => {
				return { type: 'image', url: item };
			});
			this.$previewMedia({
				sources: url,
				current: index,
			});
		},
		// 跳转项目详情
		toProjectDetail() {
			uni.navigateTo({
				url:
                    '/pageModules/projectInfo/detail?id=' +
                    this.elevatorDetail.buildingId,
			});
		},
		getPlanDetail() {
			return new Promise((resolve) => {
				getPlanDetail({ planId: this.planId }).then((res) => {
					this.planDetail = res.data;
					this.status = res.data.status;
					resolve();
				});
			});
		},
		async initData() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			getConfig().then(res => {
				this.approverUserName = res.data.zgRedeployConfig.approverUsers.map(item=>item.name).join(',');
			});
			await this.getPlanDetail();
			await this.getDetail();
			getAppealDetail({ id: this.id }).then((res) => {
				if (res) {
					if (res.data.appealResult == 2 || res.data.appealResult == 3) {
						this.approverUserName = res.data.approverUserName;
					}
					this.appealDetail = res.data;
				}
			});
			elevtorDetail({ elevatorId: this.elevatorId }).then((res) => {
				if (res) {
					console.log(res);
					this.elevatorDetail = res.data;
					// 设置水印缓存
					let data = {
						buildingId: this.elevatorDetail.buildingId,
						buildingName: this.elevatorDetail.buildingName,
						elevatorId: this.elevatorId,
						elevatorAddress: this.elevatorDetail.elevatorAddress,
						planId: this.planId,
						planWorkItemId: '',
						partsId: '',
					};
					uni.setStorage({
						key: 'waterMarkMsg',
						data,
						success: (success) => {

						},
					});
					uni.hideLoading();
				}
			});
		},
		getDetail() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			return new Promise((resolve) => {
				getAppealDetailList({ id: this.id }).then((res) => {
					if (res) {
						res.data.forEach(item => {
							if (item.locationTypeName == '任务追踪') {
								item.recordData = {
									type: '1', // 工作项类型 1，2，3，4
									must: true, // 必填
									comparison: false,// 数据对比（题型1）  true false
									options: [], // 题目内容
									min: '', // 最少填x项
									max: '', // 最多填x项
									userChoose: 1,
									userData: {
										comparison: false,
										records: {
											need: false,
											must: false,
											val: '',
										},
										files: {
											need: true,
											must: true,
											val: '',
										},
										remarks: {
											need: true,
											must: true,
											val: '',
										}
									}
								};
							}
							item.historyShow = false;
							let arr = Object.values(
								(item.checkRecords || []).reduce((acc, record) => {
									if (!acc[record.userId] || new Date(record.updateTime) > new Date(acc[record.userId].updateTime)) {
										acc[record.userId] = record;
									}
									return acc;
								}, {})
							);
							item.userRecordVOS = [{
								showAdd: arr[0] && arr[0].recordDataValue ? true : false,
								userId: arr[0] ? arr[0].userId : '',
								userName: arr[0] ? arr[0].recordUserName : '',
								recordVOList: arr || []
							}] || [];
						});

						this.workOrderDetailList = res.data;
						console.log(res.data, '工单详情');

						uni.hideLoading();
					}
					resolve(res.data.elevatorDetail);
				});
			});
		},
		// 获取经纬度信息
		getLocalInfo() {
			return new Promise((resolve) => {
				if (getApp().globalData.localinfo.latitude) {
					if (
						new Date().getTime() - getApp().globalData.localinfo.time <=
                        1000 * 60 * 2
					) {
						resolve(getApp().globalData.localinfo);
						return;
					}
				}

				uni.getLocation({
					type: 'gcj02',
					success(res) {
						console.log('位置信息获取成功', res);
						getApp().globalData.localinfo = {
							...res,
							time: new Date().getTime(),
						};
						resolve(res);
					},
					fail(err) {
						console.log('位置信息获取失败', err);
						resolve({});
					},
				});
			});
		},
		// 图片上传
		changeImg(list) {
			if (list.length > 0) {
				this.imgaddress = list[0];
				this.signImg = list;
			} else {
				this.signImg = list;
			}
		},
		// 拨打电话
		handleCall() {
			this.$nextTick(() => {
				this.$refs.property.$refs.propertyPhone.open();
			});
		},
		closePhone() {
			this.$nextTick(() => {
				this.$refs.property.$refs.propertyPhone.close();
			});
		},
		getAliasStr(str) {
			if (!str) {
				return '';
			}
			if (str.length > 20) {
				return '(项目别名：' + str.slice(0, 20) + '...)';
			} else {
				return '(项目别名：' + str + ')';
			}
		},
		// 导航
		handleGuide() {
			console.log(this.elevatorDetail, 6666);
			const {
				buildingName,
				relationAlias,
				latitude,
				longitude,
				buildingAddress,
			} = this.elevatorDetail;
			let alias = relationAlias;
			let aliasName = alias.length
				? alias
					.map((item) => {
						return item.alias;
					})
					.join(',')
				: '';
			uni.getLocation({
				type: 'gcj02',
				success: () => {
					console.log(latitude, longitude);
					uni.openLocation({
						latitude: Number(latitude),
						longitude: Number(longitude),
						scale: 18,
						name: buildingName + this.getAliasStr(aliasName),
						address: buildingAddress,
						success: () => {
							console.log('success');
						},
					});
				},
			});
		},
	},
};
</script>
<style>
page {
    height: 100%;
    background-color: #f3f6f8;
    font-size: 28rpx;
}
</style>

<style lang="scss" scoped>
$all_width: 96rpx;
$all_height: 96rpx;

.addressBox {
    width: 710rpx;
    margin: 0 auto;
    background: #fff;
    border-radius: 8rpx;
    font-size: 24rpx;
    padding: 20rpx 22rpx 16rpx 16rpx;
    font-size: 24rpx;
    color: #999;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    // position: relative;
    // z-index: 110;
    display: flex;

    .top {
        display: flex;

        .name {
            display: flex;
            // padding-left: 14rpx;
            font-weight: 600;
            color: #333;
            align-items: center;
        }

        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }
    }

    .buildAddressBox {
        display: flex;
    }

    .buildAddress {
        padding: 6rpx 20rpx 0 32rpx;
        margin-left: 10rpx;
        width: 388rpx;
        margin-right: 30rpx;
        display: flex;
        align-items: center;
    }

    .addressBox_right {
        display: flex;
        flex: 1;
        justify-content: flex-end;

        align-items: center;
    }

    .gpsAndCall {
        position: relative;
        display: flex;
        align-items: center;
        width: 190rpx;
        color: #666;

        .gpsAndCall_item {
            display: flex;
            flex: 1;
        }

        .guide {
            justify-content: flex-end;
        }

        image {
            width: 32rpx;
            height: 32rpx;
        }

        .line {
            width: 2rpx;
            height: 24rpx;
            background: #e9e9e9;
            position: absolute;
            left: 50%;
            top: 6rpx;
        }
    }
}

.statusArea {
    padding: 10rpx 20rpx;
    background: #ffffff;
    border-radius: 8rpx;
    display: flex;
    font-size: 26rpx;
    position: absolute;
    font-weight: 500;
    right: 20rpx;
    top: 40rpx;
    z-index: 120;

    image {
        width: 32rpx;
        height: 32rpx;
    }
}

.affair_detail {
    .signCircle {
        height: 80rpx;
        width: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0091ff;
        color: #fff;
        position: fixed;
        z-index: 200;
        border-radius: 50%;
    }

    .nav {
        position: sticky;
        top: 0;
        z-index: 112;
    }

    .bg {
        width: 750rpx;
        height: 354rpx;
        position: absolute;
        top: 0;
    }

    .header {
        padding-left: 40rpx;
        padding-right: 32rpx;
        margin-bottom: 30rpx;
        padding-top: 28rpx;
        position: relative;

        .appealTag {
            position: absolute;
            right: 34rpx;
            top: 30rpx;
            text-align: right;

            .tag {
                width: max-content;
                min-width: 0;
                position: relative;
                margin-left: auto;
                border: 2rpx solid #0091FF;
                color: #0091FF;
                border-radius: 8rpx;
                padding: 4rpx 16rpx;
                font-size: 26rpx;
            }
        }
    }

    .eleInfo {
        background-color: #f3f6f8;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;
        margin-bottom: 10rpx;

        .top {
            padding-left: 20rpx;
            display: flex;
            flex-direction: column;
            flex: 1;
            font-weight: 600;
            font-size: 42rpx;
            color: #333;

            view:nth-child(2) {
                color: #999;
                font-size: 12px;
                margin-top: 5px;
            }
        }

        image {
            width: 144rpx;
            height: 144rpx;
        }
    }

    .progressBar_elevator {
        width: 710rpx;
        margin: 0 auto;
        background: #fff;
        border-radius: 8rpx;
        margin-bottom: 20rpx;
        display: flex;
        height: 84rpx;
        line-height: 84rpx;
        z-index: 300;

        view:nth-of-type(1) {
            flex: 1;
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
            margin-left: 20rpx;
        }

        view:nth-of-type(2) {
            flex: 0 0 200rpx;
            text-align: right;
            font-size: 26rpx;
            color: #0091ff;
            border-radius: 8rpx;
            padding: 0rpx 30rpx;
            vertical-align: middle;

            text {
                margin-right: 8rpx;
            }

            image {
                width: 32rpx;
                height: 32rpx;
                vertical-align: middle;
            }
        }
    }

    .content_box {
        padding: 0 20rpx;
        background-color: #f3f6f8;
        padding-bottom: 150rpx;
        position: relative;

        .userListBox {
            padding: 20rpx 0;

            /deep/ .taskStep .left {
                justify-content: start;
            }
        }

        .content_item {
            margin-bottom: 20rpx;
            padding: 28rpx 20rpx;
            border-radius: 8rpx;
            background: #ffffff;

            .logDesc {
                color: #E02020;
                font-size: 28rpx;
            }

            .title {
                font-size: 32rpx;
                color: #333;
                font-weight: 600;
                padding-bottom: 22rpx;

                .logTime {
                    color: #999999;
                    font-size: 24rpx;
                    font-weight: normal;
                }
            }

            .flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .des {
                display: flex;
                margin-bottom: 16rpx;

                .label {
                    width: 240rpx;
                    margin-right: 16rpx;
                    color: #999;
                }

                :nth-child(2) {
                    display: flex;
                    flex: 1;
                    flex-wrap: wrap;
                }
            }

            .info-item {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: #333;
                align-items: baseline;

                &-label {
                    width: 130rpx;
                    color: #999;
                    margin-right: 16rpx;
                }

                &-content {
                    flex: 1;
                    line-height: 35rpx;
                }

                &-word {
                    color: #0091ff;
                    flex: 1;
                    flex-direction: column;

                    .fileName {
                        width: 520rpx;
                        // background: pink;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .imgs {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                image {
                    width: 113rpx;
                    height: 113rpx;
                    margin-right: 20rpx;
                    margin-top: 20rpx;
                }
            }

            .faultImg {
                display: flex;
                flex-wrap: wrap;

                image {
                    width: 120rpx;
                    height: 120rpx;
                    margin-right: 18rpx;
                }
            }

            .label {
                margin-right: 16rpx;
                color: #999999;
                font-size: 28rpx;
                width: 240rpx;
                // background: pink;
            }

            .falutItem {
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;

                .tag {
                    border: 2rpx solid #0091ff;
                    border-radius: 8rpx;
                    padding: 4rpx 24rpx;
                    font-size: 26rpx;
                    color: #0091ff;
                }
            }

            .orderfalutDes {
                :nth-child(1) {
                    width: 200rpx;
                }

                margin-bottom: 40rpx;
            }
        }

        .record {
            padding-left: 0;

            .title {
                padding-left: 20rpx
            }
        }

        .temp-list {
            border: 2rpx solid transparent;

            .top {
                display: flex;
                align-items: center;
                margin-top: 22rpx;

                .indexNumber {
                    background: #DDF0FF;
                    border-radius: 4rpx;
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    text-align: center;
                    color: #0091FF;
                    font-size: 26rpx;
                    margin-right: 16rpx;
                }
            }

            .content {
                margin-top: 22rpx;
                background: #F6F7FA;
                padding: 16rpx 36rpx;
                border-radius: 8rpx;
                font-size: 28rpx;
                color: #333;

                .c_title {
                    font-weight: bold;
                    border-left: 4rpx solid #0091FF;
                    padding-left: 8rpx;
                    margin-left: -8rpx;
                }

                .appeal-reason-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    image {
                        width: 32rpx;
                        height: 32rpx;
                    }

                    .appeal-reason-imgBox {
                        display: flex;
                        align-items: center;

                        .line {
                            width: 2rpx;
                            height: 32rpx;
                            background: #e9e9e9;
                            margin: 0 20rpx;
                        }
                    }
                }
            }

            .add-appeal-reason {
                display: flex;
                color: #0091FF;
                align-items: center;
                margin-top: 16rpx;

                image {
                    width: 22rpx;
                    height: 22rpx;
                    margin-right: 8rpx;
                }
            }
        }

        .progressBar {
            display: flex;
            justify-content: center;
            margin-bottom: 20rpx;

            .progressBar_content {
                width: 710rpx;
                // height: 284rpx;
                background: #ffffff;
                border-radius: 8rpx;
                padding: 24rpx 22rpx 0rpx 18rpx;
                box-sizing: border-box;
            }
        }
    }

    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 119;
        background-color: #fff;
        height: 100rpx;
        width: 100%;
        display: flex;
        border-top: 2rpx solid #eeeeee;
        box-sizing: border-box;
        padding: 0 20rpx;

        view {
            // height: 100%;
            display: flex;
            align-items: center;
        }

        .left {
            width: 200rpx;
            font-size: 20rpx;

            .left_item {
                display: flex;
                flex-direction: column;
                flex: 1;

                view {
                    width: 100%;
                    display: flex;
                    flex: 1;
                    justify-content: center;
                    // background: red;
                    color: #666;
                }

                image {
                    width: 48rpx;
                    height: 48rpx;
                }
            }
        }

        .right {
            flex: 1;

            .start {
                // width: 524rpx;
                height: 70rpx;
                background: #0091ff;
                border-radius: 8rpx;
                color: #fff;
                display: flex;
                flex: 1;

                .finBtn {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .disabled {
                color: #ccc;
                background: #EFEFEF;
            }

            .repariing {
                // width: 100%;
                display: flex;
                flex: 1;
                justify-content: space-between;
                align-items: center;

                view {
                    display: flex;
                    flex: 1;
                    justify-content: center;
                    height: 70rpx;
                    font-size: 26rpx;
                }

                .blue {
                    border-radius: 8rpx 0 0 8rpx;
                    color: #0091ff;
                    background: #f5fbff;
                }

                .add {
                    background: #0091ff;
                    color: #fff;
                    border-radius: 0 8rpx 8rpx 0;
                }

                .addRed {
                    position: relative;

                    text {
                        position: absolute;
                        top: -10rpx;
                        right: 0;
                        width: 30rpx;
                        height: 30rpx;
                        background: red;
                        border-radius: 15rpx;
                        font-size: 20rpx;
                        text-align: center;
                    }
                }

                .finish {
                    background: #efefef;
                    color: #cccccc;
                    font-size: 26rpx;
                }
            }
        }
    }

    .change_elevator {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .actElevator {
            // background-color: #0091ff;
            font-size: 24rpx !important;
            color: #0091ff !important;
            border: 2rpx #0091ff solid !important;
        }

        view:nth-of-type(1) {
            // background-color: #0091ff;
            color: #666;
            height: 72rpx;
            width: 176rpx;
            line-height: 72rpx;
            text-align: center;
            border-radius: 8rpx;
            border: 2rpx #ccc solid;
            font-size: 24rpx;
            margin-right: 60rpx;
        }

        view:nth-of-type(2) {
            font-size: 24rpx;
            color: #666;
            height: 72rpx;
            width: 176rpx;
            line-height: 72rpx;
            text-align: center;
            border-radius: 8rpx;
            border: 2rpx #ccc solid;
        }
    }

    .comfireBox {
        text-align: center;

        .content {
            color: #e02020;
            padding-top: 10rpx;
            font-size: 24rpx;
        }
    }
}

.inputPopup {
    background: #FFFFFF;
    padding-top: 36rpx;
    border-radius: 16rpx;
    width: 500rpx;

    &-top {
        padding: 0 13rpx;
        text-align: center;

        .title {
            color: #333333;
            font-weight: 500;
            font-size: 32rpx;
        }

        .notice {
            width: 90%;
            padding: 20rpx;
            height: 108rpx;
            border: 2rpx solid #e9e9e9;
            border-radius: 4rpx;
            position: relative;
            padding-bottom: 30rpx;
        }

        textarea {
            font-size: 28rpx;
            width: 100%;
            height: 108rpx;
            text-align: left;
        }

        .length {
            text-align: right;
            color: #ccc;
            position: absolute;
            right: 10rpx;
            font-size: 2;
            font-size: 24rpx;
            bottom: 5rpx;
        }
    }

    &-bottom {
        border-top: 2rpx solid #F5F5F5;
        display: flex;
        align-items: center;
        margin-top: 36rpx;

        >view {
            width: 50%;
            text-align: center;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 28rpx;
            color: #999999;
            border-right: 2rpx solid #F5F5F5;
        }
    }
}
</style>